<template>
    <div class="bg">
        <nav-com title="申请退货退款" :showView='true' @back="backHandler()"></nav-com>
        <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;">
            <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
                退款金额<div style="color:red">*</div>
            </div>
            <div style="padding:10px">
                <div style="display:flex;justify-content: space-between;">
                    <!-- <div style="color:#FE4B20;font-size: 18px;font-weight: bold;">￥{{returnForm.refund_fee}}</div>
                    <div style="color:#808080;font-size:12px" @click="editMoney">修改</div> -->
                    <van-field v-model="returnForm.money" label="" placeholder="请输入退款金额" />
                </div>
                <!-- <div style="color:#808080;font-size:12px;line-height: 20px;">可修改，最多￥{{returnForm.refund_fee}}，含发货邮费￥0.00</div> -->
            </div>
             <div style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
                手机号<div style="color:red">*</div>
            </div>
            <div style="padding:10px">
                <div style="display:flex;justify-content: space-between;">
                    <!-- <div style="color:#FE4B20;font-size: 18px;font-weight: bold;">{{returnForm.refund_fee}}</div> -->
                    <van-field v-model="returnForm.phone" label="" placeholder="请输入您的手机号" />
                </div>
            </div>
        </div>

        <div style="background-color: white; margin: 10px 15px;border-radius: 10px;;line-height: 40px;padding-bottom: 5px;">
            <div  style="display:flex;border-bottom: 1px solid #DCDCDC;padding-left: 10px">
                补充描述和凭证<div style="color:red">*</div>
            </div>
            <div style="background-color: rgb(247, 247, 247);margin: 5px 10px; border-radius: 10px;">
                <div>
                    <van-cell-group>
                        <van-field v-model="returnForm.desc"   type="textarea" placeholder="补充描述，有助于商家更好的处理售后问题"   maxlength="200"

                        show-word-limit/>
                    </van-cell-group>
                </div>
                <div style="padding:10px">
                    <van-uploader v-model="fileList" max-count="3" upload-text="3张凭证" :after-read="afterRead" />
                </div>
            </div>
        </div>
        <div @click="submit" style="color: #FFFFFF;margin:0 auto;text-align: center;width: 300px;line-height: 50px;background: #FE4B20;border-radius: 50px;margin-top: 50px;">提交</div>
        <van-dialog v-model="show">
            <div style="padding:20px">
                <van-field v-model="returnForm.refund_fee" type="digit" placeholder="输入金额" confirmButtonColor="#FE4B20"/>
            </div>
        </van-dialog>
    </div>
    
</template>
<script>
import { getOrders,getOrders2,putOrders,putselfWithdrawal,applyReturnGoods,orderAftersale,postImages2} from '@/api/api'
import navCom from '@/component/nav'
import { Field } from 'vant';
import { Uploader } from 'vant';
import { Dialog } from 'vant';
import {Toast} from "vant";

export default {
    name:'orders',
    components:{
        navCom
    },
    data() {
        return {
            show:false,
            id:"",
            fileList: [],
            returnForm:{
                "money":"",
                "phone":"",
                "desc":"",
                "images":[]
            }
        }
    },
    filters: {
	/*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
        formatDateTime:function(date) {
            var date = new Date(date*1000);
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var Hours = date.getHours();
            if (Hours >= 0 && Hours <= 9) {
                Hours = "0" + Hours;
            }
            var Minutes = date.getMinutes();
            if (Minutes >= 0 && Minutes <= 9) {
                Minutes = "0" + Minutes;
            }
            var Seconds = date.getSeconds();
            if (Seconds >= 0 && Seconds <= 9) {
                Seconds = "0" + Seconds;
            }
            var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                    + " " + Hours + ":" + Minutes + ":" + Seconds;
            return currentDate;
        }
        
    },

    mounted(){

    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        editMoney(){
            this.show=true
        },
        //初始化
        init(){
            // this.getDataHanlder("range")
        },
        //获取数据
        submit(){
            console.log(this.returnForm);
            if(this.returnForm.images.length==0){
                this.$dialog.alert({
                        message:"请上传凭证"
                 })
                 return;
            }
            if(this.returnForm.desc==""){
                this.$dialog.alert({
                        message:"请填写描述"
                 })
                 return;
            }
            applyReturnGoods(this.returnForm).then(res=>{
                console.log("applyReturnGoods",res);
                // Toast(res.data.msg);
                if(res.data.code==1){
                    Toast("申请成功！");
                    setTimeout(()=>{
                        this.$router.go(-1)
                    },1500)
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                 })
                }
            })
        },
        afterRead(file) {
            var that=this;
            console.log(file);
            file.status = 'uploading';
            file.message = '上传中...';
            var data = new FormData()
                data.append('file',file.file)
                postImages2(data).then(res=>{
                    if(res.data.code=1){
                        file.status = 'done';
                        file.message = '';
                        that.returnForm.images.push(res.data.data.fullurl) 
                        
                    }else{
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                    console.log(res);
                    
                })
        },
    }
}
</script>
<style scoped>
    .bg{
        height: 100vh;
        background-color: #f2f3f7;
    }
    .van-cell-group {
        background-color:#f7f7f7;
    }
    .van-cell {
        font-size: 10px!important;
        background-color:#f7f7f7;
        border: 0 solid #f7f7f7;
   
    }
    .van-cell ::after {
    border: 0 solid #f7f7f7;
    }
    .van-uploader__upload-text {
    /* margin-top: 8px; */
    color: #969799;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
<style>
.van-uploader__upload {
    border: 1px solid #E0E0E0!important;
}
.van-uploader__upload-text {
    margin-top: 0px!important;
}
</style>